<template>
  <view class="container">
<!--    <page-header>-->
<!--      <template v-slot:left>-->
<!--        <view class="left">-->
<!--          <uni-icons custom-prefix="iconfont" color="#000000" type="icon-left" size="27"></uni-icons>-->
<!--        </view>-->
<!--      </template>-->
<!--      <template v-slot:left1 >-->
<!--        <view class="left" @click="goCart">-->
<!--          <uni-icons custom-prefix="iconfont" color="#000000" type="icon-cart" size="27"></uni-icons>-->
<!--        </view>-->
<!--      </template>-->
<!--    </page-header>-->
    <view class="goods-list" >
      <view class="goods-item" v-for="(item, index) in list" :key="index" @click="onTargetDetail(item.id)">
        <view  class="">
          <!-- 商品图片 -->
          <view class="goods-image">
            <image class="image" mode="aspectFill" :src="item.picUrl"></image>
          </view>
          <view class="detail">
            <!-- 商品标题 -->
            <view class="goods-name">
              <text class="twoline-hide">{{ item.name }}</text>
            </view>
            <!-- 商品价格 -->
            <view class="detail-price oneline-hide">
              <template v-if="userInfo && userInfo.userLevel>1 ">
                <text class="goods-price f-30 col-m" >￥{{ item.retailPrice }}</text>
                <text class="line-price col-9 f-24">￥{{ item.originalPrice }}</text>
              </template>
              <template v-else>
                <text class="goods-price f-30 col-m">￥{{ item.originalPrice }}</text>
              </template>
<!--              <text class="line-price col-9 f-24" v-if="userInfo && userInfo.userLevel>1 && item.originalPrice">￥{{ item.originalPrice }}</text>-->
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="cart" @click="goCart">
      <view class="cart-box">
        <u-badge type="error" max="999" :value="cartNumber"></u-badge>
      </view>
      <uni-icons custom-prefix="iconfont" color="#242323" type="icon-cart" size="27"></uni-icons>
    </view>
    <u-loadmore :status="status" />
  </view>
</template>

<script>
import {getUserInfo} from '@/core/app'
export default {
  name: "list",
  data(){
    return {
      page:1,
      size:10,
      status: 'loadmore',
      list:[

      ],
      userInfo:{},
      cartNumber:0
    }
  },
  // onNavigationBarButtonTap(e) {
  //   this.$navTo("page_work/cart/index")
  // },
  onPullDownRefresh(){
    this.page = 1;
    this.getList();
  },
  onReachBottom(){
    if(this.status == 'nomore') return;
    this.page++;
    this.status = 'loading';
    this.getList();
  },
  onLoad() {
    // 加载页面数据
    this.getList();
    this.userInfo = getUserInfo();
    // console.log(this.userInfo )
  },
  onShow(){
    this.getCart();
  },
  methods:{
    goCart(){
      this.$navTo("page_work/cart/index")
    },
    getCart(){
      this.$request.get('wx/cart/index',).then(({data}) => {
        this.cartNumber = data.cartTotal.goodsCount;
      }).catch(err=>{
        this.$toast(err.errmsg)
      })
    },
    getList(){
      let params = {
        sort:'add_time',
        page:this.page,
        size:this.size
      }
      this.$request.get('wx/goods/list', params).then(({data}) => {
        if(data.totalPages<=this.page){
          this.status = 'nomore';
        }
        this.list = this.page == 1 ? data.goodsList : this.list.concat(data.goodsList);
      }).catch(err=>{
        this.$toast(err.errmsg)
      })
    },
    // 跳转商品详情页
    onTargetDetail(goodsId) {
      this.$navTo('page_work/goods/detail', { goodsId })
    },

  }
}
</script>

<style scoped lang="scss">
.container{
  min-height: 100vh;
  background: #F4F4F4;
  .cart{
    position: fixed;
    right: 26rpx;
    bottom: 400rpx;
    z-index: 10;
    background: rgba(198,198,198,0.19);
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25);
    border-radius: 50%;
    width: 110rpx;
    height: 110rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .cart-box{
      position: absolute;
      top: 22rpx;
      right: 16rpx;
      width: 32rpx;
      height: 32rpx;
    }
  }
}
.goods-list {
  padding: 20rpx;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 14rpx;
}

.goods-item {
  box-sizing: border-box;
  border-radius: 16rpx;
  background: #FFF;
  overflow: hidden;
  .goods-image {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;

    &:after {
      content: '';
      display: block;
      margin-top: 100%;
    }

    .image {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      -o-object-fit: cover;
      object-fit: cover;
    }
  }

  .detail {
    padding: 16rpx;
    .goods-name {
      line-height: 48rpx;
      white-space: normal;
      color: #242323;
      font-size: 28rpx;
      font-weight: 400;
    }

    .detail-price {
      .goods-price {
        margin-right: 8rpx;
        color: #FB1F1E;
        font-size: 32rpx;
      }

      .line-price {
        color: #959595;
        text-decoration: line-through;
      }
    }
  }
}
</style>